<template>
    <div
      v-if="dialog"
      class="ant-popover  ant-popover-placement-rightTop"
      style="left:55%;top:55%;transform-origin: -4px 0px;"
    >
      <div class="ant-popover-content">
        <div class="ant-popover-arrow" /><div
          class="ant-popover-inner"
          role="tooltip"
        >
          <div>
            <div class="ant-popover-inner-content">
              <div
                class="add-node-popover"
                data-spm-anchor-id="0.0.0.i102.2f244490UdKR44"
              >
                <div class="add-node-popover-header">
                  <span>选择一个动作</span>
                  <a-button @click="dialog1 = false" type="text" icon="close"></a-button>
                </div>
                <div class="add-node-popover-body">
                  <div v-for="item in action"
                    :key="item.key"
                  >
                    <div class="addnode_popover_title">
                      {{item.label}}
                    </div>
                    <div class="addnode_popover_container">
                    <div
                      v-for="itemAction in item.array"
                      :key="itemAction.name"
                      class="add-node-popover-item"
                      @click="handleClick(itemAction)"
                    >
                      <div class="add-node-popover-item-icon"></div>
                      <p>{{itemAction.name}}</p>
                    </div>
                  </div>
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
import {uuid} from "@/utils/utils"
export default {
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    node: {
      type: Object,
      default: undefined
    }
  },
  data: () => ({
    dialog1: false,
  }),
  watch: {
    'dialog' (val) {
      this.dialog1 = val
    },
    dialog1 (val) {
      this.$emit('update:dialog', val)
    }
  },
  methods: {
    handleClick (item) {
      this.dialog1 = false
      switch (item.type) {
        case "ACTION":
          this.addAction(item)
          break
        case 'CONDITION':
          this.addCondition(item)
          break
      }
    },
    addAction (item) {
      let _this = this
      let node = Object.assign(JSON.parse(JSON.stringify(item)), {
        prevId: _this.node.nodeId,
        nodeId: uuid()
      })
      this.$emit('addnode', node)
    },
    addCondition (item) {
      let _this = this
      let nodeId = uuid()
      let node = Object.assign(JSON.parse(JSON.stringify(item)), {
        prevId: _this.node.nodeId,
        nodeId,
        conditionNodes: [
          Object.assign(JSON.parse(JSON.stringify(_this.condition)),{
            prevId: nodeId, nodeId: uuid()
          }),
          Object.assign(JSON.parse(JSON.stringify(_this.condition)),{
            prevId: nodeId, nodeId: uuid()
          }),
        ]
      })
      this.$emit('addnode', node)
    }
  },
  computed:{
    action () {
      let action = this.$store.getters?.nodeDefinitions?.action || []
      let newAction = [
        {
          key: "datadeal",
          label: "数据处理",
          array: []
        },
        {
          key: "component",
          label: "构件",
          array: []
        },
        {
          key: "artificial",
          label: "人工",
          array: []
        },
        {
          key: "exploit",
          label: "开发",
          array: []
        },
      ]
      action.forEach(a => {
        if(a.type !== 'FILTER'){
          newAction.forEach(n => {
            if(n.label === a.group){
              n.array.push(a)
            }
          })
        }
      })
      return newAction
    },
    condition(){
      let condition = { name: '条件', type: 'FILTER' }
      let c = this.$store.getters?.nodeDefinitions?.action.find(c => c.type === 'FILTER')
      return  c || condition
    }
  }
}
</script>
